<!--会话聊天面板-->
<template>

  <div class="flex flex-col">
    联系人详情展示

    <span>昵 称 {{contact.nickname}}</span>
    <span>账号名 {{contact.username}}</span>
    <div class="card-actions justify-center">
      <button class="btn btn-ghost btn-sm" @click="clickMessage">发消息</button>
      <button class="btn btn-ghost btn-sm" @click="toCall(0,contact?.userId,false)">语音</button>
      <button class="btn btn-ghost btn-sm" @click="toCall(1,contact?.userId,false)">视频</button>
    </div>
  </div>

</template>

<script setup lang="ts">
import type {ContactsItem} from '../../models/chat_model.ts';
import IconMale from "@/components/icons/IconMale.vue";
import IconFemale from "@/components/icons/IconFemale.vue";
import {useChatStore} from "@/stores/chating_store.js";
import {defineProps, inject, ref, toRaw} from 'vue'
import UserApi from '@/api/user.js'
import {useRoute, useRouter} from 'vue-router';

//父组件传值时的定义
const props = defineProps<{
  contact?: ContactsItem;
}>();

const route = useRoute();
const router = useRouter();
const chatStore = useChatStore()



const clickBlack = (userId: String)=>{
  console.debug("addToBlack ...")
  UserApi.addToBlack(userId).then()
}
const clickDelete = (userId: String)=>{
  console.debug("deleteFriend ...")
  UserApi.deleteFriend(userId).then()
}

const clickMessage = () => {
  console.log(`clickMessage...`);
  chatStore.obtainChatting(toRaw(props.contact))

  router?.replace("/chats")
}

const toCall = inject('toCall');

</script>

<style scoped>

</style>